<template>
  <div>
    <el-table :data="data" style="width: 100%; height: 100%">
      <el-table-column label="用户ID" width="80">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">
            {{ scope.row.user_id }}
          </span>
        </template>
      </el-table-column>
      <!-- 用户姓名 -->
      <el-table-column label="用户姓名" width="90">
        <template slot-scope="scope">
          {{ scope.row.user_name | spaceName }}
        </template>
      </el-table-column>
      <!-- 用户密码 -->
      <el-table-column label="用户密码" width="90">
        <template slot-scope="scope">
          {{ scope.row.user_pwd }}
        </template>
      </el-table-column>
      <!-- 用户电话 -->
      <el-table-column label="用户电话" width="180">
        <template slot-scope="scope">
          {{ scope.row.user_phone | spaceName }}
        </template>
      </el-table-column>
      <!-- 用户身份证号码 -->
      <el-table-column label="用户身份证号码" width="180">
        <template slot-scope="scope">
          {{ scope.row.user_cardId | spaceName }}
        </template>
      </el-table-column>
      <!-- 用户紧急联系人电话 -->
      <el-table-column label="用户紧急联系人姓名" width="180">
        <template slot-scope="scope">
          {{ scope.row.user_urgent_name | spaceName }}
        </template>
      </el-table-column>
      <!-- 用户紧急联系人电话 -->
      <el-table-column label="用户紧急联系人电话" width="180">
        <template slot-scope="scope">
          {{ scope.row.user_urgent_phone | spaceName }}
        </template>
      </el-table-column>
      <!-- 用户驾驶证照-->
      <el-table-column label="用户驾驶证照" width="180">
        <template slot-scope="scope">
          {{ scope.row.user_urgent_car01 | spaceName }}
        </template>
      </el-table-column>
      <!-- 用户驾驶证照 -->
      <el-table-column label="用户驾驶证照" width="180">
        <template slot-scope="scope">
          {{ scope.row.user_urgent_car02 | spaceName }}
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row.user_id, scope.row)"
            >编辑</el-button
          >

          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.user_id, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    this.getdata();
  },
  filters: {
    spaceName: function (value) {
      return (value == null && "未填写") || value;
    },
  },
  methods: {
    getdata() {
      this.axios.post("/admin/getdatauser").then((res) => {
        console.log(res);
        this.data = res.data.data;
      });
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.$prompt("请输入密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^[0-9A-Za-z]{6,}$/,
        inputErrorMessage: "密码格式不正确",
      })
        .then(({ value }) => {
          this.axios
            .post("/admin/updateuserpwd", `pwd=${value}&id=${index}`)
            .then((res) => {
              // console.log(res)
              if (res.data.code == 200) {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.getdata()
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("此操作讲永久删除用户信息!是确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios.post("/admin/deleteuser", `id=${index}`).then((res) => {
            // console.log(res)
            if (res.data.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getdata();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped></style>
